<template>
  <div>
    <el-table
      :data="form"
      :show-header="false"
      height="360"
      border
      style="width: 50%;min-width: 500px;">
      <el-table-column
        prop="leftone"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="lefttwo"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        prop="rightone"
        width="180"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="righttwo"
        label="地址">
      </el-table-column>
    </el-table>
    <router-link :to="'/school/edit/' + id">
      <el-button size="small" type="danger" style="display:block; margin-top: 20px;">编辑</el-button>
    </router-link>
    <!-- 数据展示 -->
    <div class="schart">
      <div class="content-title">学校实时数据显示</div>
      <schart canvasId="ring" width="500" height="400" :data="school_real_data" type="ring" :options="options2"></schart>
    </div>
    <!-- 图片展示 -->
    <div class="school-img">
      <div class="inline">
        <div>合同图</div>
        <img :src="'http://' + image[0]" alt="合同图">
      </div>
      <div class="inline">
        <div>封面图</div>
        <img :src="'http://' + image[1]" alt="封面图">
      </div>
      <div>
        <div>学校视图</div>
        <img :src="'http://' + item.school_pic" alt="" v-for="item in image[2]" :key="item.id">
      </div>
    </div>
    <!-- 朋友圈展示 背景颜色、border-radius -->
    <el-container class="container" v-if="moment_list">
      <el-main>
        <!-- 朋友圈内容 展示、分页 -->
        <ul class="moment-container">
          <li v-for="(item,index) in moment_list" :key="item.id" class="moment-li">
            <!-- 显示名字->发布了
            日期 文字灰
              内容、图片
             -->
            <div class="name"><strong>{{item.student_name}}</strong>&nbsp;&nbsp;发布了</div>
            <!-- <time></time> -->
            <small>{{item.created_at}}</small>
            <div class="moment-content">{{item.content}}</div>
            <ul v-if="item.pics.length>0" class="moment-image">
              <li v-for="it in item.pics" :key="it">
                <img :src="it" alt="图片">
              </li>
            </ul>
            <el-button
              style="margin-top: 5px;"
              size="mini"
              type="danger"
              @click="handleDelete(index, item.id)">删除</el-button>
          </li>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="15"
            style="text-align: center;margin-top: 15px;">
          </el-pagination>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入图表组件
import Schart from 'vue-schart'
export default {
  components: {
    Schart
  },
  data() {
    return {
      form: undefined,
      id: undefined,
      image: [],
      school_real_data: [
        { name: '学生数量', value: 1024 }, 
        { name: '交押金数量', value: 2018 }, 
        { name: '购买服务数量', value: 3069 }
      ],
      options2: {
        title: '今日学校实时数据',
        bgColor: '#607d8b',
        titleColor: '#ffffff',
        legendColor: '#ffffff'
      },
      moment_list: null,
      total: undefined
    }
  },
  mounted() {
    APP.ajax('post@school/detail', { id: this.$route.params.id }, res => {
      let data = res.data.data[0];
      let contact_name = undefined;
      this.id = data.id;
      if (data.contact_wechat !== null && data.contact_wechat.length>0) {
        data.contact_wechat.reduce((pre, cur, index, arr) => {
          return contact_name = pre.name + ',' + cur.name
        })
      }
      if (data.moment === 1) {
        this.getMomentList();
      };
      // 修改格式，化为可以显示的表格格式
      this.form = [
        {
          leftone: '学校名称',
          lefttwo: data.school_name,
          rightone: '省',
          righttwo: data.province
        },
        {
          leftone: '学校地址',
          lefttwo: data.school_address,
          rightone: '市',
          righttwo: data.city
        },
        {
          leftone: '合同开始时间',
          lefttwo: data.contract_start_time,
          rightone: '县',
          righttwo: data.area
        },
        {
          leftone: '合同结束时间',
          lefttwo: data.contract_end_time,
          rightone: '洗衣机数量',
          righttwo: data.num
        },
        {
          leftone: '负责人',
          lefttwo: contact_name,
          rightone: '最小号码牌',
          righttwo: data.min_num
        },
        {
          leftone: '排序',
          lefttwo: data.sort,
          rightone: '最大号码牌',
          righttwo: data.max_num
        },
        { leftone: '朋友圈', lefttwo: data.moment = data.moment == 0 ? '关闭' : '开启', rightone: '', righttwo: '' }
        // { leftone: , lefttwo: , rightone: , righttwo:  }
        // 分为左一 命名 左二 数据 右一 命名， 右二 数据
      ];
      // 下方合同照片-封面图片-学校相册
      this.image.push(data.contract_path, data.cover_path, data.school_pic);
    })
    APP.ajax('analysis/schoolRealTime?id=' + this.$route.params.id, {}, res => {
      let data = res.data.data;
      this.school_real_data = [
        { name: '学生数量', value: data.student_day }, 
        { name: '交押金数量', value: data.deposit_day }, 
        { name: '购买服务数量', value: data.service_day }
      ]
    })
  },
  methods: {
    getMomentList () {
      APP.ajax('moment/list', { school_id: this.$route.params.id }, res => {
        // 数据、分页
        this.moment_list = res.data.data.data;
        this.total = res.data.data.total;
      })
    },
    handleDelete (index, id) {
      APP.ajax('post@moment/del', { id: id }, res => {
        if (res.data.status === 200) {
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          this.moment_list.splice(index, 1);
        } else {
          this.$message({
            message: '失败!失败!失败!',
            type: 'warning'
          });
        }
      })
    },
    handleCurrentChange (val) {
      APP.ajax('moment/list?page=' + val, { school_id: this.$route.params.id }, res => {
        this.moment_list = res.data.data.data;
      })
    }
  }
}
</script>
<style scoped>
.schart {
  width: 600px;
  display: inline-block;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.inline{
  width: 200px;
  height: 200px;
  display: inline-block;
}
.school-img  img{
  width: 150px;
  height: 150px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
}
.container{
  font-size: 12px;
  color: #676a6c;
  border: 1px solid #dee5e7;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.moment-container{
  padding: 15px 20px 20px 20px;
  border: 1px solid #e7eaec;
}
.moment-li{
  border-bottom: 1px solid #e7eaec;
  padding-bottom: 15px;
  margin-top: 15px;
}
.moment-list:first-child{
  margin-top: 0;
}
small{
  color: #d6d3e6;
}
ul li{
  list-style: none;
}
.moment-content{
  border: 1px solid #e7eaec;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 11px;
  padding: 10px 20px;
  line-height: 16px;
  background-color: #f5f5f5;
}
.moment-image{
  margin: 10px 0;
}
.moemnt-image img{
  max-height: 180px;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
  border: 0;
}
</style>

